<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <span>角色管理</span>
      </div>
      <div>
        <el-button type="success" size="small" class="addBut" @click="addBut">+ 新增</el-button>
        <div class="form">
          <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="id" width="80" label="编号" align="center"> </el-table-column>
            <el-table-column prop="roleName" width="250" label="角色名称" align="center"> </el-table-column>
            <el-table-column prop="description" label="描述" align="center"> </el-table-column>
            <el-table-column fixed="right" width="250" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="openDetailWin(scope.row)" type="warning" size="small">编辑</el-button>
                <!-- <el-button @click="openDistributeWin(scope.row)" type="primary" size="small">分配模块</el-button> -->
                <el-button @click="openDeleteRole(scope.row)" type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="pageBox"
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="pageTotal"
          @current-change="getList"
          @prev-click="getList"
          @next-click="getList"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 角色详情 -->
    <el-dialog
      :title="detailForm.id === 0 ? '新增角色' : '编辑角色信息'"
      :visible.sync="detailWin"
      width="30%"
      @close="detailClose"
      center
    >
      <div>
        <el-form label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="detailForm.roleName" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              type="textarea"
              v-model="detailForm.description"
              :maxlength="50"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入描述"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="detailForm.id === 0">
            <el-checkbox v-model="position">职能部门</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="detailWin = false">取消</el-button>
        <el-button type="primary" @click="subRole()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 分配模块 -->
    <el-dialog title="分配模块" :visible.sync="distributeWin" width="30%" center>
      <div>
        <el-tree :data="distributeData" show-checkbox node-key="id" :props="defaultProps"> </el-tree>
      </div>
      <span slot="footer">
        <el-button @click="distributeWin = false">取 消</el-button>
        <el-button type="primary" @click="subDistribute()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/project'
export default {
  data() {
    return {
      // 表格
      tableData: [],
      // 详情
      detailWin: false,
      detailForm: {
        id: 0,
        roleName: '',
        description: '',
      },
      // 分配
      distributeWin: false,
      distributeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      currentPage: 1,
      pageTotal: 0,
      position: false,
    }
  },
  created() {
    this.getList(1)
    // this.getPermissionList()
  },
  methods: {
    addBut() {
      this.detailWin = true
      this.detailForm.id = 0
    },
    getList(e) {
      this.currentPage = e
      let data = {
        pageNo: e,
        pageSize: 10,
        // roleName: ''
      }
      api.roleList(data).then(res => {
        if (res.code == '200') {
          this.tableData = res.data.records
          this.pageTotal = res.data.totalRecord
        }
      })
    },
    getPermissionList() {
      api.permissionList().then(res => {
        if (res.code == '200') {
        }
      })
    },
    // 打开详情窗口
    openDetailWin(e) {
      this.detailWin = true
      this.detailForm.id = e.id
      this.detailForm.roleName = e.roleName
      this.detailForm.description = e.description
    },
    // 关闭详情窗口
    detailClose() {
      this.detailForm = {
        id: 0,
        roleName: '',
        description: '',
      }
      this.position = false
    },
    // 打开分配模块
    openDistributeWin() {
      this.distributeWin = true
    },
    // 打开删除弹窗
    openDeleteRole(e) {
      this.$confirm('确定删除此角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let data = {
          id: e.id,
        }
        api.roleDelete(data).then(res => {
          if (res.code == '200') {
            this.$message({
              message: res.msg,
              type: 'success',
            })
            this.heavyLoad()
          }
        })
      })
    },
    // 新增编辑角色
    subRole() {
      if (!this.detailForm.roleName) {
        this.$message.error('请输入角色名称')
        return
      }
      let data = {
        roleName: this.detailForm.roleName,
        description: this.detailForm.description,
      }
      if (this.position) {
        data.roleStatus = 'department'
      }
      if (this.detailForm.id !== 0) {
        data.roleId = this.detailForm.id
        api.updateRole(data).then(res => {
          if (res.code == '200') {
            this.$message({
              message: res.msg,
              type: 'success',
            })
            this.heavyLoad()
          }
        })
      } else {
        api.increase(data).then(res => {
          if (res.code == '200') {
            this.$message({
              message: res.msg,
              type: 'success',
            })
            this.heavyLoad()
          }
        })
      }
    },
    heavyLoad() {
      this.detailWin = false
      this.detailClose()
      this.getList(1)
    },
    // 提交分配模块
    subDistribute() {},
  },
}
</script>

<style lang="scss" scoped>
@import './role.scss';
</style>
